import React, {PropsWithChildren, useCallback, useEffect, useState} from 'react'
import {View} from "@tarojs/components";
import styles from "./market.module.sass"
import {Button, Cell, SearchBar, VirtualList} from "@nutui/nutui-react-taro";
import {Add, FilterH} from "@nutui/icons-react-taro";
import { Pageable} from "../utils/Page";
import {queryMarkets, QueryMarketsResponse} from "../apis/MarketsApi";
import Taro from "@tarojs/taro";
import marketPageStackStore from "../store/MarketPageStackStore";
import {observer} from "mobx-react";
import FloatButton from "../components/FloatButton";
import employeeStore from "../store/EmployeeStore";
import MyNavigationBar from "../components/MyNavigationBar";

export interface MarketProps extends PropsWithChildren {

}

const Market: React.FC<MarketProps> = ({}) => {
    const [searchNameText, setSearchNameText] = useState<string>()
    const [searchInputValue, setSearchInputValue] = useState("")
    const [loading, setLoading] = useState(false)

    const queryWithoutPageable = useCallback((pageable:Pageable)=>{
        setLoading(true)
        queryMarkets({name: searchNameText || undefined}, pageable).then(res => {
            marketPageStackStore.appendItems(res.data)
        }).finally(() => {
            setLoading(false)
        })
    },[searchNameText])

    const query = useCallback(() => {
        queryWithoutPageable(marketPageStackStore.pageable)
    }, [queryWithoutPageable, ...marketPageStackStore.pageable.toDependencyList()]);

    useEffect(() => {
        query()
    }, [query]);

    function onSearch() {
        marketPageStackStore.resetListAndPageable()
        setSearchNameText(searchInputValue)
    }
    return <>
        <MyNavigationBar>卖场</MyNavigationBar>
        <View className={styles.container}>
            <SearchBar  value={searchInputValue} shape="round" maxLength={9999} right={
                <Button type={"primary"} size={"small"} loading={loading} onClick={onSearch}>搜索</Button>
            } left={<FilterH onClick={() => {
            }}/>} onChange={value => {
                setSearchInputValue(value.trim())
            }} onSearch={onSearch} placeholder={"卖场名称"}/>
            <VirtualList className={styles.scrollView}
                         onScroll={() => {
                             if (!marketPageStackStore.last && !loading) {
                                 marketPageStackStore.next()
                             }
                         }} itemHeight={46}
                         list={marketPageStackStore.list}
                         itemRender={(market: QueryMarketsResponse) => {
                             return <Cell style={{margin: 0}}
                                          onClick={() => {
                                              Taro.navigateTo({
                                                  url: `/pages/marketDetail?id=${market.id}`
                                              })
                                          }}>{market.name}</Cell>;
                         }}/>
            <View></View>
            {employeeStore.hasAuthority("卖场_新增")&&<FloatButton icon={<Add/>} onClick={async () => {
                await Taro.navigateTo({url: "/pages/marketAdd"});
            }}/>}
        </View>
    </>
}

export default observer(Market)


